<template>
	<el-container>
		<el-main>
			<FullCalendar :options='calendarOptions'>

			</FullCalendar>
		</el-main>
	</el-container>
</template>

<script>
	import FullCalendar from '@fullcalendar/vue3'
	import dayGridPlugin from '@fullcalendar/daygrid'
	import zhCnLocale from '@fullcalendar/core/locales/zh-cn'

	export default {
		name: 'calendar.list',
		components: {
			FullCalendar
		},
		data: function() {
			return {
				calendarOptions: {
					locales: [zhCnLocale], // 注册语言包
					locale: 'zh-cn', // 设置默认语言
					plugins: [dayGridPlugin],
					initialView: 'dayGridMonth',
					weekends: false,
					events: [{
							title: '五一活动...',
							start: new Date()
						}, {
							title: '劳动节',
							start: '2025-05-01', // 根据年份调整
							allDay: true,
							backgroundColor: '#ff9f89',
							borderColor: '#ff9f89',
							className: 'holiday'
						},
						{
							title: '国庆节',
							start: '2025-10-01', // 根据年份调整
							allDay: true,
							backgroundColor: '#ff9f89',
							borderColor: '#ff9f89',
							className: 'holiday'
						}, {
							title: '周年庆活动',
							start: '2025-05-01', // 开始日期
							end: '2025-05-08', // 结束日期（注意：需要设为5月8日才能显示到5月7日）
							allDay: true,
							backgroundColor: '#f59e0b', // 橙色背景
							borderColor: '#d97706',
							textColor: '#ffffff',
							classNames: ['anniversary-event']
						}
					],
					eventClick: function(info) {
						// 显示详情对话框
						alert(
							`活动: ${info.event.title}\n时间: ${info.event.start.toLocaleDateString()} - ${new Date(info.event.end.getTime() - 86400000).toLocaleDateString()}`
						);
					},
					headerToolbar: {
						left: 'prev,next today',
						center: 'prevYear,prev title next,nextYear',
						right: 'dayGridMonth,dayGridWeek,dayGridDay'
					},
					buttonText: {
						today: '今天',
						month: '月',
						week: '周',
						day: '日',
						prev: '‹',
						next: '›',
						prevYear: '«',
						nextYear: '»'
					}
				}
			}
		}
	}
</script>

<style>
	/* 使用 CSS 变量修改按钮样式 */
	:root {
		/* 普通状态的蓝色 */
		--fc-button-bg-color: #1976d2;
		--fc-button-border-color: #1976d2;

		/* 悬停状态的深蓝色 */
		--fc-button-hover-bg-color: #1565c0;
		--fc-button-hover-border-color: #1565c0;

		/* 激活状态的更深蓝色 */
		--fc-button-active-bg-color: #0d47a1;
		--fc-button-active-border-color: #0d47a1;

		/* 文字颜色 */
		--fc-button-text-color: #ffffff;
	}

	/* 如果需要更具体的控制，可以为特定容器设置 */
	.calendar-container {
		/* 这里可以覆盖更具体的容器内的样式变量 */
	}
</style>

<style scoped>
	:deep(h2) {
		display: inline-block;
		vertical-align: middle;
	}

	:deep(.anniversary-event) {
		font-weight: bold;
		font-size: 18px;
	}
</style>
